<!--
 * @Autor: dingxiaolin
 * @Date: 2022-10-13 08:27:09
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2022-10-17 16:40:33
-->
<template>
    <uni-section title="" type="line">
        <uni-search-bar
            placeholder="搜索"
            @confirm="search"
            v-model="searchValue"
            @input="input"
            @cancel="cancel"
            @clear="clear"
        >
        </uni-search-bar>
        <view class="call-list"  v-if="mailList.length>0">
            <view v-for="(item,index) in mailList" :key="index">
                <view class="org label">{{item.deptName}}</view>
                <view class="list" v-for="(v,i) in item.userLinkList" :key="i"  @click="call(v.marinerPhone)">
                    <view class="avatar">
                        <image src="@/static/image/bqqd/avatar.png" alt="">
                        <span class="label">{{v.userName}}</span>
                    </view>
                    <view class="phone label">{{v.marinerPhone}}</view>
                </view>
            </view>
        </view>
        <view class="noData"  v-if="mailList_temp.length>0 && mailList.length==0">
            <p><uni-icons type="search" size="42" color="#999"></uni-icons></p>
            <p class="tips">未找到“{{searchValue}}”的相关结果</p>
            <span>检查拼写或尝试新的搜索词</span>
        </view>
        <view class="noData"  v-if="mailList_temp.length==0 && mailList.length==0">
           <u-empty  > </u-empty>
        </view>
    </uni-section>
</template>

<script>
import { getMailList } from '@/api/alarm'
export default {
    name: "call",
    components: {},
    computed: {},
    data() {
        return {
            searchValue: "",
            mailList_temp:[],
            mailList:[]
        };
    },
    mounted() {
        this.init()
    },
    methods: {
        search(res) {
            // uni.showToast({
            //     title: "搜索：" + res.value,
            //     icon: "none",
            // });
        },
        call(phone){
            uni.showModal({
                title: '提示',
                content: `是否确认拨打电话${phone}?`,
                success: function (res) {
                    if (res.confirm) {
                        uni.makePhoneCall({
                            phoneNumber: phone
                        });
                    } else if (res.cancel) {
                    }
                }
            });
        },
        init(cb){
            this.mailList=[]
            this.mailList_temp=[]
            getMailList({userName:""}).then((res) => {
                this.mailList = res
                this.mailList_temp = res
				console.log('this.mailList',this.mailList)
                cb && cb()
            })  
        },
        onPullDownRefresh() {
			this.init(() => uni.stopPullDownRefresh())
		},
        filterName(key){
            let list = this.mailList_temp.map(v=>{
                let arr=v.userLinkList.filter(item=>item.userName.includes(key) || item.marinerPhone.includes(key)) || []
                if(arr.length>0){
                    return {
                        deptName:v.deptName,
                        userLinkList:arr
                    }
                }
            })
            console.log('list',list)
            this.mailList = list.filter(v=>v!=null)
            console.log('ddd',this.mailList)
        },
        input(res) {
            this.filterName(res)
        },
        clear() {
            this.mailList = this.mailList_temp
        },
        cancel() {
           this.mailList = this.mailList_temp
        },
    },
};
</script>

<style lang="less" scoped>
    .call-list{
        .org{
            background: #eee;
            padding:5px 5px 5px 10px;
            color: #000;
        }
        .list{
            width: 100%;
            margin-left:10px;
            padding:5px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .avatar {
            display: flex;
            align-items: center;
            image{
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }
        .label{
            color: #666;
            font-weight: bold;
            font-size: 16px;
        }
        .phone {
            margin-right:15%;
        }
    }
         .noData{
            text-align: center;
            width: 100vw;
            height:80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p{
                width: 100%;
                text-align: center;
            }
            .tips{
                font-size: 22px;
                color:#000
            }
            span{
                font-size: 14px;
                color:#999;
            }
        }
</style>
